<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文章详情</title>
    <style>
        a {
            text-decoration: none;
            color: #1106ff;
        }
        textarea:hover{
            background-color: #f0f0f0;
            border: 1px solid black;
            border-radius: 10px;
            box-shadow: 0 0 30px black;
        }
        textarea:focus{
            border-radius: 10px;
            box-shadow: 0 0 40px #398439;
        }
        input:hover{
            background-color: black;
            border: 1px solid black;
            box-shadow: 0 0 20px black;
        }
        input:focus{
            background-color: black;
            color: black;
            border: 1px solid black;
            box-shadow: 0 0 40px black;
        }
    </style>
</head>
<body>
<div th:insert="~{front/header::head}"></div>
<div>
    <div style="text-align: center;">
        <h1 th:text="${article.getTitle()}"></h1>
        <p style="font-size: 20px">作者：<span th:text="${article.getAuthor()}"></span></p>
        <p style="font-size: 18px">发布时间：<span th:text="${article.getPosttime()}"></span></p>
    </div>
    <div style="width: 50%;margin-left: 30%;font-size: 22px;
    font-family: 'Franklin Gothic Medium',ui-rounded"
         th:text="${article.getContent()}"></div>
</div>
<th:block th:if="${isBack == 1}">
    <div style="text-align: center;margin-top: 40px;font-size: 30px">
        <a th:href="@{/(contentSize = 6)}" style="color: #ff7948;">返回</a>
    </div>
</th:block>
<th:block th:if="${isBack == 0}">
    <div style="text-align: center;margin-top: 80px;">
    <span style="font-size: 20px;" th:if="${#session.getAttribute('userName') == '空'}">你好，现在是无法评论的，只有
        <a th:href="@{/tologin(isArticleDetailLogin = 1,aId = ${article.getArtid()})}"
           style="color: #ff7948;">登录</a>
        之后才能发表评论</span>
    </div>
    <div style="text-align: center;margin-top: 80px;font-size: 20px"
         th:if="${#session.getAttribute('userName') != '空'}">
        <p><span th:text="${#session.getAttribute('userName')}"></span>
            ,你可以在此发表评论： </p>
        <form th:action="@{/front/addComment}" method="post">
            <label>
        <textarea name="content" rows="5" cols="30" style="resize: none;font-size: 25px;"
                  placeholder="在此输入评论" required></textarea>
            </label>
            <input type="hidden" name="articleId" th:value="${article.getArtid()}"><br>
            <label style="text-align: center"><input type="submit" value="发表" style="border-radius: 10%;
       font-size: 20px;background-color: black;color: white;border-block-color: black;border-width: 10px"></label>
        </form>
    </div>
    <div th:if="!${commentList.isEmpty()}" style="margin-bottom: 30px">
        <div style="margin-top: 50px;margin-left:35%;margin-right: 30%;font-size: 20px">评论：</div>
        <div style="display:inline-block;width: 500px;
            height: auto;padding: 10px;margin-top: 20px;margin-left:35%;margin-right: 30%;
            background: gray;border-radius: 10px;" th:each="comment:${commentList}">
            <div style="width: auto;height: auto;padding: 0;">
                <span style="color: white;font-size: 20px" th:text="${comment.getAuthor()}"></span>
            </div>
            <div style="width: auto;height: auto;padding: 0;margin-top: 10px;font-size: 25px">
                <span th:text="${comment.getContent()}"></span>
            </div>
            <div style="width: auto;height: auto;padding: 0;margin-top: 10px">
                <span style="color: white;font-size: 16px" th:text="${comment.getPosttime()}"></span>
                <th:block th:if="${#session.getAttribute('userName') == comment.getAuthor()}">
                    <a th:href="@{/front/toModifyComment(id = ${comment.getCommentid()},
                content = ${comment.getContent()},aId= ${article.getArtid()})}"
                       style="color: blue;font-size: 18px" th:text="修改"></a>
                    <a th:href="@{/front/deleteComment(id = ${comment.getCommentid()},
                aId = ${article.getArtid()})}"
                       style="color: red;font-size: 18px" th:text="删除"></a>
                </th:block>
            </div>
        </div>
    </div>
</th:block>
</body>
</html>
